<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS带提示登录表单验证代码 - 站长素材</title>

    <style>
        *{
            margin:0;
            padding:0;
            font-family:"微软雅黑";
            font-size:12px;
        }
        .box{
            width:390px;
            height:320px;
            border:solid 1px #ddd;
            background:#FFF;
            position:absolute;
            left:50%;
            top:42%;
            margin-left:-195px;
            margin-top:-160px;
        }
        .box h2{
            font-weight:normal;
            color:#666;
            font-size:16px;
            line-height:46px;
            height:46px;
            overflow:hidden;
            text-align:center;
            border-bottom:solid 1px #ddd;
            background:#f7f7f7;
        }
        .input_box{
            width:350px;
            padding-bottom:15px;
            margin:0 auto;
            overflow:hidden;
        }
        .input_box input{
            float:left;
            width:348px;
            height:40px;
            font-size:14px;
            border:solid 1px #ddd;
            text-indent:10px;
            outline:none;
            line-height:40px;
        }
        .input_box button{
            width:350px;
            height:48px;
            background:#3f89ec;
            border:none;
            border-radius:2px;
            outline:none;
            cursor:pointer;
            font-size:16px;
            color:#FFF;
        }
        #error_box{
            height:40px;
            width:350px;
            margin:0 auto;
            line-height:40px;
            color:#fc4343;
        }
    </style>
    <script>
        //长度必须在6~20位之间
        //开头不能为数字
        //只能包含小写字母和数字
        //数字：48~57
        //小写字母：97~122
        //innerHTML
        function fnLogin(){
            var oUname = document.getElementById("uname");
            var oUpass = document.getElementById("upass");
            var oError = document.getElementById("error_box");
            var isNotError = true;
            if(oUname.value.length > 20 || oUname.value.length < 5){
                oError.innerHTML = "用户名长度必须在6~20位之间";
                isNotError = false;
                return;

            }else if(oUname.value.charCodeAt(0) >= 48 && oUname.value.charCodeAt(0) <= 57){
                oError.innerHTML = "用户名开头不能为数字";
                isNotError = false;
                return;
            }else{
                for(var i=0; i<oUname.value.length; i++){
                    if((oUname.value.charCodeAt(i) > 122 || oUname.value.charCodeAt(i) < 97) && (oUname.value.charCodeAt(i) > 57 || oUname.value.charCodeAt(i) < 48)){
                        oError.innerHTML = "用户名只能包含小写字母和数字";
                        isNotError = false;
                        return;
                    }
                }
            }
            if(oUpass.value.length > 20 || oUpass.value.length < 6){
                oError.innerHTML = "密码长度必须在6~20位之间";
                isNotError = false;
                return;
            }
            oError.innerHTML = "登录成功";
        }
    </script>
</head>
<body>

<div class="box">
    <h2>登录</h2>
    <div id="error_box"></div>
    <form action="/ypxspt/sysUser/login">
        <div class="input_box">
            <input type="text" placeholder="请输入账户名" name="loginName" id="uname"/>
        </div>
        <div class="input_box">
            <input type="password" placeholder="请输入密码" name="loginPassword" id="upass"/>
        </div>
        <div class="input_box">
            <button>登录</button>
        </div></form>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>